<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--表单-->
        <el-form :inline="true" size="small">
          <el-form-item label="管理员">
            <el-input v-model="criteria.admin_name" placeholder="管理员"></el-input>
          </el-form-item>
          <el-form-item label="接口">
            <el-input v-model="criteria.url" placeholder="接口"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="criteria.dateRange" type="daterange" align="right" unlink-panels value-format="YYYY-MM-DD"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:250px" @change="onSubmit">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <!--表格-->
        <el-table :data="tableData" border size="small">
          <el-table-column prop="id" label="ID" align="center" min-width="80"></el-table-column>
          <el-table-column prop="admin_name" label="管理员" align="center" min-width="80"></el-table-column>
          <el-table-column prop="title" label="标题" align="center" min-width="100"></el-table-column>
          <el-table-column prop="url" label="接口" min-width="150"></el-table-column>
          <el-table-column prop="ip" label="IP" align="center" min-width="80"></el-table-column>
          <el-table-column prop="create_at" label="添加时间" align="center" min-width="100"></el-table-column>
          <el-table-column prop="content" label="内容" show-overflow-tooltip min-width="200"></el-table-column>
          <el-table-column label="操作" align="center" min-width="100">
            <template #default="scope">
              <el-button type="primary" @click="showContent(scope.row)" size="small">查看内容</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange"
                         :current-page="page" :page-size="pageSize"
                         :page-sizes="[20, 50, 100, 200, 1000]"
                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
          </el-pagination>
        </div>
      </el-col>
      <el-dialog title="查看内容" center v-model="dialogFormVisible">
        <pre>{{ form.content }}</pre>
      </el-dialog>
    </el-row>
  </section>
</template>
<script setup>
  import { ref } from "vue";
  import func from '@/common/func'
  const criteria = ref({})
  const tableData = ref([])
  const dialogFormVisible = ref(false)
  const form = ref({})
  const page = ref(1)
  const pageSize = ref(20)
  const totalCount = ref(0)
  let criteria_default = {}

  for (let i in criteria.value) {
    if (criteria_default[i] === undefined) {
      criteria_default[i] = criteria.value[i];
    }
  }
  loadData();

  function onSubmit() {
    if (page.value !== 1) {
      page.value = 1;
    }
    loadData();
  }
  function onReset() {
    for (var i in criteria.value) {
      criteria.value[i] = criteria_default[i];
    }
  }
  function showContent(row) {
    form.value = {
      content: JSON.stringify(JSON.parse(row.content), null, '\t')
    }
    dialogFormVisible.value = true
  }
  function handleCurrentChange(val) {
    if (page.value !== val) {
      page.value = val;
    }
    loadData();
  }
  function handleSizeChange(val) {
    if (pageSize.value !== val) {
      pageSize.value = val;
      loadData();
    }
  }
  function loadData () {
    var pdt = {};
    if (undefined !== criteria.value) {
      pdt = JSON.parse(JSON.stringify(criteria.value));
    }
    pdt.page = page.value;
    pdt.pageSize = pageSize.value;
    if (pdt.dateRange) {
      pdt.startDate = pdt.dateRange[0]
      pdt.endDate = pdt.dateRange[1]
      delete pdt.dateRange
    }
    func.request('/system/systemLog', pdt).then(res => {
      if (res.code === 1) {
        tableData.value = res.data.list;
        totalCount.value = res.data.total;
      }
    });
  }

</script>
<style lang="scss">
.el-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.el-message-box__btns .cancel {
  float: right;
  margin-left: 10px;
}
</style>
